<template lang="pug">
.list
  .list-add-btn
    el-button(size="small" type="primary" @click="add") 添加成员
    el-button(size="small" name="primary" @click="audit") 人员审核
  .list-header
    .list-header-filter
      header-filter(:filter="filter")
  .list-body
    .list-body-handles
      .list-filter
        el-button(size="small" name="primary" @click="batchDelete") 删除
    .list-table
      el-table(
        :data="list"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{'fontSize': '14px', 'background': '#F7F7F7', 'color': '#363636'}"
      )
        el-table-column(type="selection" align="center" width="55px")
        el-table-column(label="账号" prop="userName")
        el-table-column(label="姓名" prop="nickName")
        el-table-column(label="手机号" prop="mobile")
        el-table-column(label="角色" prop="roleName")
        el-table-column(label="邮箱" prop="mail")
        el-table-column(label="操作")
          template(slot-scope="scope")
            .table-item-handle(v-if="scope.row.roleId !== 1" @click="edit(scope.row)") 编辑
            .table-item-handle(v-if="scope.row.roleId !== 1" @click="deleteMember(scope.row)") 删除
            .table-item-txt(v-if="scope.row.roleId === 1") --
      .index-pagination
        .pagination-total 共 {{total}} 条
        .pagination-sizes 10 条/页
        el-pagination(
          background
          layout="prev, pager, next, jumper"
          :total="total"
          :page-size="pageSize"
          :current-page="page"
          @current-change="currentChange"
        )
  create-member-modal(:show="showDialog", :item="currentItem" @close="closeModal" @confirm="confirmModal")
</template>

<script>
import headerFilter from '@/components/headerFilter'
import createMemberModal from '@/components/modal/createMemberModal'
import { querySupplierMember, delSupplierMember } from 'api'
export default {
  name: 'personList',
  components: {
    headerFilter,
    createMemberModal
  },
  data () {
    return {
      tabActive: '',
      tabs: [
        { label: '全部通知', value: '' },
        { label: '入册通知', value: 1 },
        { label: '找材通知', value: 2 },
        { label: '选用通知', value: 4 },
        { label: '收藏通知', value: 4 },
        { label: '系统通知', value: 5 }
      ],
      filter: [
        [
          {
            name: '搜索：',
            type: 'default',
            key: 'userInfo',
            userInfo: '',
          },
          {
            type: 'handle',
            buttons: [
              { name: 'primary', label: '查询', handle: this.search },
              { label: '重置', handle: this.reset }
            ]
          }
        ]
      ],
      list: [],
      total: 0,
      page: 1,
      pageSize: 10,
      showDialog: false,
      currentItem: {},
      selections: []
    }
  },
  methods: {
    search () {
      let query = {}
      this.filter.map(row => row.map(v => {
        if (v[v.key]) query[v.key] = v[v.key]
      }))
      Object.keys(query).forEach(v => {
        if (!query[v]) delete query[v]
      })
      this.$router.replace({ name: this.$route.name, query: { ...query, tm: new Date().getTime() } })
    },
    reset () {
      this.$router.replace({ name: this.$route.name })
    },
    async initFilter () {
      try {
        this.filter.forEach(row => row.forEach(v => {
          v[v.key] = this.$route.query[v.key] || ''
        }))
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    currentChange (page) {
      this.$router.replace({ name: this.$route.name, query: { ...this.$route.query, currentPage: page, tm: new Date().getTime() } })
    },
    audit () {
      this.$router.push({ name: 'personAudit' })
    },
    add () {
      this.showDialog = true
    },
    edit (row) {
      this.showDialog = true
      this.currentItem = row
    },
    closeModal () {
      this.showDialog = false
      this.currentItem = {}
    },
    confirmModal () {
      this.showDialog = false
      this.currentItem = {}
      this.getList()
    },
    async deleteMember (row) {
      this.$confirm('你确定要删除该人员吗？', '提示').then(async () => {
        try {
          await this.$axios.post(delSupplierMember, { content: { userId: row.userId } })
          this.$message.success('删除成功！')
          this.getList()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    handleSelectionChange (selection) {
      this.selections = selection
    },
    batchDelete () {
      if (!this.selections.length) {
        this.$message.error('请先选择要删除的人员！')
        return
      }
      let ids = this.selections.map(item => item.userId).join(',')
      this.$confirm('你确定要删除选中的人员吗？', '提示').then(async () => {
        try {
          await this.$axios.post(delSupplierMember, { content: { userId: ids } })
          this.$message.success('删除成功！')
          this.getList()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    async getList () {
      try {
        let query = { ...this.$route.query, currentPage: this.$route.query.currentPage || 1, pageLines: this.pageSize }
        const { ResultSet } = await this.$axios.post(querySupplierMember, { content: { ...query } })
        this.page = parseInt(this.$route.query.currentPage)
        this.list = ResultSet.userData.Member
        this.total = ResultSet.userData.totalSize
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getList()
      vm.initFilter()
    })
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.getList()
    this.initFilter()
  }
} 
</script>

<style lang="scss" scoped>
.list {
  padding: 0 32px 16px;
}
.list-header {
  padding: 32px 24px 16px;
  background: #FFFFFF;
  border-radius: 4px;
}
.list-add-btn {
  margin-bottom: 16px;
}
.list-body {
  margin-top: 16px;
  padding: 24px;
  background: #FFFFFF;
  border-radius: 4px;
}
.list-body-handles {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list-table {
  margin-top: 16px;
}
.index-pagination {
  margin-top: 24px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  color: #7A7A7A;
  .pagination-total {
    margin-right: 10px;
  }
  .pagination-sizes {
    margin-right: 10px;
  }
}
.table-item-handle {
  display: inline-block;
  padding: 0 8px;
  line-height: 1;
  cursor: pointer;
  color: #FF2E42;
  &:first-child {
    padding-left: 0;
    border-right: 1px solid #CBCBCB;
  }
}
</style>
